<h3>Multi Select</h3>
<p>
    Regular &lt;select&gt; input is nice, but quite limited. For example, it is hard to use this control on a large set of options. To provide a solution, I have implemented drop down list based on a text input filed but with a dynamic list of options that gets filtered as you type.
</p>
<div style="height: 20px"></div>

<h5>Preview</h5>
<style>
    .w2ui-field {
        margin: 10px 0px;
    }
    .w2ui-field input {
        width: 450px;
    }
</style>
<div style="height: 20px"></div>
<div class="w2ui-reset">
    <div class="w2ui-field">
        <label>Multi-Select:</label>
        <div><input id="enum" style=""width: 450px"> </div>
    </div>
    <div class="w2ui-field">
        <label>Max 2 Items:</label>
        <div><input id="enum-max" style=""width: 450px"></div>
    </div>
    <div class="w2ui-field">
        <label>Custom:</label>
        <div><input id="enum-custom" style=""width: 450px"></div>
    </div>
    <div style="height: 20px"></div>
</div>
<script>
$(function () {
    var pstyle = 'padding-right: 3px; color: #828AA7; text-shadow: 1px 1px 3px white;';
    var people = ['George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan', 'James Madison', 'Abraham Lincoln', 'James Monroe', 'Andrew Johnson', 'John Adams', 'Ulysses Grant', 'Andrew Jackson', 'Rutherford Hayes', 'Martin Van Buren', 'James Garfield', 'William Harrison', 'Chester Arthur', 'John Tyler', 'Grover Cleveland', 'James Polk', 'Benjamin Harrison', 'Zachary Taylor', 'Grover Cleveland', 'Millard Fillmore', 'William McKinley', 'Franklin Pierce', 'Theodore Roosevelt', 'John Kennedy', 'William Howard', 'Lyndon Johnson', 'Woodrow Wilson', 'Richard Nixon', 'Warren Harding', 'Gerald Ford', 'Calvin Coolidge', 'James Carter', 'Herbert Hoover', 'Ronald Reagan', 'Franklin Roosevelt', 'George Bush', 'Harry Truman', 'William Clinton', 'Dwight Eisenhower', 'George W. Bush', 'Barack Obama'];
    $('#enum').w2field('enum', {
        items: people,
        openOnFocus: true,
        selected: [{ id: 0, text: 'John Adams' }, { id: 0, text: 'Thomas Jefferson' }]
    });
    $('#enum-max').w2field('enum', {
        items: people,
        openOnFocus: true,
        max: 2
    });
    $('#enum-custom').w2field('enum', {
        items: people,
        openOnFocus: true,
        onAdd: function (event) {
            if (Math.random() > 0.8) {
                event.item.style = 'background-color: rgb(255, 232, 232); border: 1px solid red;';
            }
        },
        renderItem: function (item, index, remove) {
            var html = remove + '<span class="fa fa-trophy" style="'+ pstyle +'; margin-left: -4px;"></span>' + item.text;
            return html;
        },
        renderDrop: function (item, options) {
            return '<span class="fa fa-star" style="'+ pstyle +'"></span>' + item.text;
        }
    });
    // if you need to get to the selected items, use:
    // $('#id').data('selected');
});
</script>
<div style="height: 20px; clear: both"></div>

<h5>Code</h5>
<textarea class="html">
<div class="w2ui-field">
    <label>Multi-Select:</label>
    <div><input id="enum"> </div>
</div>
<div style="height: 10px; clear: both"></div>
<div class="w2ui-field">
    <label>Max 2 Items:</label>
    <div><input id="enum-max"></div>
</div>
<div style="height: 10px; clear: both"></div>
<div class="w2ui-field">
    <label>Custom:</label>
    <div><input id="enum-custom"></div>
</div>
<div style="height: 20px"></div>

&lt;script>
$(function () {
    var pstyle = 'padding-right: 3px; color: #828AA7; text-shadow: 1px 1px 3px white;';
    var people = ['George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan', 'James Madison', 'Abraham Lincoln', 'James Monroe', 'Andrew Johnson', 'John Adams', 'Ulysses Grant', 'Andrew Jackson', 'Rutherford Hayes', 'Martin Van Buren', 'James Garfield', 'William Harrison', 'Chester Arthur', 'John Tyler', 'Grover Cleveland', 'James Polk', 'Benjamin Harrison', 'Zachary Taylor', 'Grover Cleveland', 'Millard Fillmore', 'William McKinley', 'Franklin Pierce', 'Theodore Roosevelt', 'John Kennedy', 'William Howard', 'Lyndon Johnson', 'Woodrow Wilson', 'Richard Nixon', 'Warren Harding', 'Gerald Ford', 'Calvin Coolidge', 'James Carter', 'Herbert Hoover', 'Ronald Reagan', 'Franklin Roosevelt', 'George Bush', 'Harry Truman', 'William Clinton', 'Dwight Eisenhower', 'George W. Bush', 'Barack Obama'];
    $('#enum').w2field('enum', {
        items: people,
        openOnFocus: true,
        selected: [{ id: 0, text: 'John Adams' }, { id: 0, text: 'Thomas Jefferson' }]
    });
    $('#enum-max').w2field('enum', {
        items: people,
        openOnFocus: true,
        max: 2
    });
    $('#enum-custom').w2field('enum', {
        items: people,
        openOnFocus: true,
        onAdd: function (event) {
            if (Math.random() > 0.8) {
                event.item.style = 'background-color: rgb(255, 232, 232); border: 1px solid red;';
            }
        },
        renderItem: function (item, index, remove) {
            var html = remove + '<span class="fa fa-trophy" style="'+ pstyle +'; margin-left: -4px;"></span>' + item.text;
            return html;
        },
        renderDrop: function (item, options) {
            return '<span class="fa fa-star" style="'+ pstyle +'"></span>' + item.text;
        }
    });
    // if you need to get to the selected items, use:
    // $('#id').data('selected');
});
&lt;/script>
</textarea>

<h3>Options</h3>
You can provide various options for numeric fields as second argument. The structure of the options object is below:

<textarea class="javascript">
options = {
    items           : [],           // array of item objects, can be a function
    selected        : {},           // selected object
    max             : 0,            // max number of selected items, 0 - unlimited
    match           : 'begins',     // ['contains', 'is', 'begins', 'ends']
    filter          : true,  // if true, will apply filtering
    compare         : null,  // compare function for filtering
    // -- remote items --
    url             : null,         // url to pull data from (can support similar format as w2grid)
    method          : null,         // default comes from w2utils.settings.dataType
    postData        : {},           // additional data to submit to URL
    recId           : null,         // map retrieved data from url to id, can be string or function
    recText         : null,         // map retrieved data from url to text, can be string or function
    debounce        : 250,          // number of ms to wait before sending server call on search
    minLength       : 1,            // min search length to trigger reload from URL
    cacheMax        : 250,          // number of items to cache if retrieved from URL
    // -- item and drop items --
    maxItemWidth    : 250,          // max width for a single item
    maxDropHeight   : 350,          // max height for drop down menu
    maxDropWidth    : null,         // max width for drop down menu
    renderItem      : null,         // render selected item
    renderDrop      : null,         // render function for drop down item
    // -- misc --
    style           : '',    // style for container div
    openOnFocus     : false, // if true, opens drop down on focus
    markSearch      : false, // if true, highlights search phrase
    align           : '',    // align drop down relative to search field
    altRows         : true,  // if ture, will use alternate row colors
    hideSelected    : true,  // hide selected items from drop down
    msgNoItems      : 'No matches',
    msgSearch       : 'Type to search...',
    // -- events --
    onAdd           : null,  // when item is selected from drop down
    onNew           : null,  // when new item should be added
    onRemove        : null,  // when item is removed
    onSearch        : null,  // when search is triggered
    onClick         : null,  // when item is clicked
    onRequest       : null,  // when data is requested
    onLoad          : null,  // when data is received
    onError         : null,  // when data fails to load due to server error
    onScroll        : null,  // when div with selected items is scrolled
    onMouseEnter    : null,  // when mouse enters item
    onMouseLeave    : null,  // when mouse leaves item
}
</textarea>

<h5>Item Object</h5>

<textarea class="javascript">
options = {
    id       : '',      // unique id
    text     : '',      // item text
    icon     : '',      // icon class if any
    img      : '',      // image class if any
    disabled : false,   // indicates if disabled
    hidden   : false,   // indicates if hidden
    count    : null     // count to display on the right
};
</textarea>

<h3>Set Value From JavaScript</h3>
To set a different value from JavaScript you need to change $('#id').data('selected') and refresh the field:
<textarea class="javascript">
$('input[type=combo]').data('selected', { id: 1, text: 'Some text'}).change();
// or
$('input[type=combo]').w2field().set({ id: 1, text: 'Some text'});
</textarea>
In 1.4.0, you should be able to do it with
<textarea class="javascript">
$('input[type=combo]').data('selected', { id: 1, text: 'Some text'}).data('w2field').refresh();
</textarea>